<template>
  <a-card title="门店列表">
    <section class="filter-bar mb-16">
      <span class="label">门店名称：</span>
      <a-input
        class="mr-24 w-300"
        allow-clear
        placeholder="请输入门店名称"
        v-model="name"
        @pressEnter="search"
        maxLength="50"
      />
	    <span class="label">服务商：</span>
		<a-select
		class="flex-1 mr-24 w-300"
		  allow-clear
		  show-search
		  labelInValue
		  @change="getData"
		  v-model="vendorId"
		  placeholder="请选择服务商"
		  :loading="selectConfig.searchLoading"
		  @focus="focus"
		 @search="searchData"
		 :filter-option="filterOption"
		 @popupScroll="popupScroll"
		>
		  <a-select-option v-for="item in vendorList" :value="item.id" :key="item.id">{{
		    item.name
		  }}</a-select-option>
		          
		</a-select>
      <span class="label">联系方式：</span>
      <a-input
        class="mr-24 w-300"
        allow-clear
        placeholder="请输入门店联系方式"
        v-model="telephone"
        @pressEnter="search"
        maxLength="50"
      />
      <a-button type="primary" @click="search">查询</a-button>
      <a-button class="ml-8" @click="reset">重置</a-button>
      <a class="ml-8" href="javascript:" @click="isUpOn">{{ isUp ? '收起' : '展开' }}</a>
    </section>
    <section v-show="isUp" class="isUp">
      <section class="filter-bar">
        <span class="label mb-16">联系人：</span>
        <a-input
          class="mr-24 w-300 mb-16"
          allow-clear
          placeholder="请输入门店联系人姓名"
          v-model="contactName"
          maxLength="50"
          @pressEnter="search"
        />
        <span class="label">所在城市：</span>
        <!--        <a-cascader-->
        <!--          class="mr-24 w-300 mb-16"-->
        <!--          :options="cityList"-->
        <!--          v-model="cityValue"-->
        <!--          @change="cascaderChange"-->
        <!--        >-->
        <!--        </a-cascader>-->
        <SelectCity
          class="mr-24 w-300 mb-16"
          placeholder="请选择所在城市"
          :options="{ allowClear: true }"
          v-model="cityId"
          @change="search"
        />
        <span class="label mb-16">门店状态：</span>
        <a-select
          class="mr-24 w-300 mb-16"
          v-model="status"
          allow-clear
          placeholder="请选择门店状态"
          @change="stateChange"
        >
          <a-select-option :value="0"> 全部 </a-select-option>
          <a-select-option v-for="(item, index) in stateList" :value="item.value" :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <!-- <span class="mb-16">取消政策：</span>
        <a-select class="w-300 mb-16" v-model="status" allow-clear placeholder="请选择取消政策" @change="stateChange">
          <a-select-option :value="0"> 全部 </a-select-option>
          <a-select-option v-for="(item, index) in stateList" :value="item.value" :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select> -->
      </section>
    </section>
    <a-table
      class="table-con"
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <template #name="val, data">
        <section class="text-left">
          <section class="flex items-center font-bold text-16">
            {{ data.name }}
            <a-popover placement="right">
              <a-icon class="text-20 ml-8" type="qrcode" />
              <section slot="content" class="flex">
                <section>
                  <section>微信小程序二维码 <a :href="data.wxQrCodeUrl" download>下载</a></section>
                  <img v-if="refreshtype !== 1" class="mt-20 w-160 h-160" :src="data.wxQrCodeUrl" alt="" />
                  <img
                    v-if="refreshtype == 1"
                    class="mb-14 w-240 h-240"
                    :src="ChannelCode == data.code ? refreshaliQrCodeUrl : data.wxQrCodeUrl"
                    alt=""
                  />
                </section>
                <section>
                  <section>支付宝小程序二维码 <a :href="data.aliQrCodeUrl" download>下载</a></section>
                  <img v-if="refreshtype !== 1" class="mb-14 w-240 h-240" :src="data.aliQrCodeUrl" alt="" />
                  <img
                    v-if="refreshtype == 1"
                    class="mb-14 w-240 h-240"
                    :src="ChannelCode == data.code ? refreshaliQrCodeUrl : data.aliQrCodeUrl"
                    alt=""
                  />
                </section>
                <section>
                  <a class="ml-8" @click="refresh(data)">刷新</a>
                </section>
              </section>
            </a-popover>
              <a-tag class="ml-10"  v-if="data.storeType===1" color="#2db7f5">直营</a-tag>
              <a-tag class="ml-10" v-if="data.storeType===2" >自营</a-tag>
              <a-tag class="ml-10" v-if="data.storeType===3" color="#87d068">旗舰店</a-tag>
          </section>
          <section class="text-14">编号：{{ data.id }}</section>
          <section class="text-14">城市：{{ data.provinceName }}-{{ data.cityName }}</section>
          <section class="text-14">地址：{{ data.address }}</section>
        </section>
      </template>
      <template #openingTime="val, data">
        <section class="text-14" v-if="data.openingTime">周一 至 周日</section>
        <section class="text-14" v-if="data.openingTime">
          {{ data.openingTime }}-{{ data.closingTime }}（{{ data.isOpenTwentyfourHours ? '24小时营业' : '按时营业' }}）
        </section>
        <section class="text-14" v-if="data.nightFeeStartTime">
          {{ data.nightFeeStartTime }}-{{ data.nightFeeEndTime }}（夜间租¥{{ data.nightFeePickupCharge }}还¥{{
            data.nightFeeReturnCharge
          }}）
        </section>
        <section v-else class="text-14">暂无营业信息</section>
        <section class="text-14" v-if="data.aheadHour">最短提前预定时间：{{ data.aheadHour }}小时</section>
        <section class="text-14" v-else>暂未设定提前预定时间</section>
      </template>
      <template #statusName="val, data">
        <template v-if="data.status === 4">
          <a-tooltip placement="top">
            <template #title v-if="data.auditId && data.auditRefusedReason">
              <section>
                <p style="margin-bottom: 0" v-if="data.auditId">申请单号：{{ data.auditId }}</p>
                <p v-if="data.auditRefusedReason" style="margin-bottom: 0">拒绝原因：{{ data.auditRefusedReason }}</p>
              </section>
            </template>
            <section class="text-14 error-color">{{ val }}</section>
          </a-tooltip>
        </template>
        <section
          v-else
          class="text-14"
          :class="{
            'success-color': data.status === 1,
            grey: data.status === 2,
            'warning-color': data.status === 3,
            'error-color': data.status === 4,
          }"
        >
          {{ val }}
        </section>
        <!--创建审核中-->
        <a-tooltip
          placement="top"
          v-if="data.status === 3 && data.auditType === 1"
          :title="data.auditId ? `申请单号:${data.auditId}` : undefined"
        >
          <a-tag
            class="block w-95 px-2 py-4 text-white m-auto my-4 border-0 warning-bg"
            style="white-space: normal"
            type="primary"
          >
            {{ data.auditTypeDesc }}
          </a-tag>
        </a-tooltip>
        <!--主体修改审核中-->
        <a-tooltip
          placement="top"
          v-if="data.status === 1 && data.auditType === 2"
          :title="data.auditId ? `申请单号:${data.auditId}` : undefined"
        >
          <a-tag
            class="block w-80 px-2 py-4 text-white m-auto my-4 border-0 warning-bg"
            style="white-space: normal"
            type="primary"
          >
            {{ data.auditTypeDesc }}
          </a-tag>
        </a-tooltip>

        <!--下线-->
        <a-tooltip
          placement="top"
          v-if="data.status === 2 && data.auditType === 2"
          :title="data.auditId ? `申请单号:${data.auditId}` : undefined"
        >
          <a-tag
            class="block w-80 px-2 py-4 text-white m-auto my-4 border-0 warning-bg"
            style="white-space: normal"
            type="primary"
          >
            {{ data.auditTypeDesc }}
          </a-tag>
        </a-tooltip>
      </template>
      <template #contactName="val, data">
        <section class="text-14" v-if="data.contactName">联系人：{{ data.contactName }}</section>
        <section class="text-14" v-if="data.telephone">联系方式：{{ data.telephone }}</section>
        <section class="text-14" v-if="data.contactPhoneNumber">联系人手机：{{ data.contactPhoneNumber }}</section>
      </template>
      <template #action="val, data">
        <tempale v-if="data.status !== 4">
          <a-tooltip
            placement="top"
            :title="
              (data.status === 3 && data.auditType === 1) || data.auditType === 2
                ? `请耐心等待本次修改审核结果`
                : undefined
            "
          >
            <a
              class="action"
              :class="{ grey: (data.status === 3 && data.auditType === 1) || data.auditType === 2 }"
              v-if="$permissionJudge('StoreSubjectUpdate')"
              @click.stop="subjectUpdate(data)"
              href="javascript:"
              >修改主体信息</a
            >
          </a-tooltip>
          <section :class="{ grey: data.status === 3 && data.auditType === 1 }">
            <a-tooltip
              placement="top"
              :title="data.status === 3 && data.auditType === 1 ? `请耐心等待本次修改审核结果` : undefined"
            >
              <a
                class="action"
                :disabled="data.status === 3 && data.auditType === 1"
                v-if="$permissionJudge('StoreBusinessHoursUpdate')"
                @click.stop="editStoreBusinessInfo(data)"
                href="javascript:"
                >修改营业信息</a
              >
              <a
                class="action"
                :disabled="data.status === 3 && data.auditType === 1"
                v-if="$permissionJudge('StoreCancelStrategyUpdate')"
                @click.stop="editStoreCancelStrategy(data)"
                href="javascript:"
                >修改退订规则</a
              >
              <a
                class="action"
                :disabled="data.status === 3 && data.auditType === 1"
                v-if="$permissionJudge('StoreServiceScopeUpdate')"
                @click.stop=""
                href="javascript:"
                @click="toServiceCoverageHandle(data)"
                >修改营业范围</a
              >
              <a
                class="action"
                :disabled="data.status === 3 && data.auditType === 1"
                v-if="$permissionJudge('StoreDriverStrategyUpdate')"
                @click.stop="driverStrategy(data)"
                href="javascript:"
                >修改租车须知</a
              >
              <a
                class="action"
                :disabled="data.status === 3 && data.auditType === 1"
                v-if="$permissionJudge('StoreStatusSet') && data.status !== 2"
                @click.stop="storeOffline(data)"
                href="javascript:"
                >使该门店下线</a
              >
            </a-tooltip>
          </section>
        </tempale>
        <template v-if="data.status === 2">
          <a
            class="action"
            v-if="$permissionJudge('StoreStatusSet')"
            @click.stop="storeActivate(data, false)"
            href="javascript:"
            >门店激活</a
          >
        </template>
        <template v-if="data.status === 4">
          <a
            class="action"
            v-if="$permissionJudge('StoreCreate')"
            @click.stop="$router.push({ path: `/update-store/${data.id}/2` })"
            href="javascript:"
            >重新申请</a>
        </template>
        <a href="javascript:;" class="action" @click="storeDetails(data)">门店详情</a>
        <a class="action" @click.stop="storeLog(data)" href="javascript:">门店日志</a>
<!--        <a class="action" @click.stop="priceLog(data)" href="javascript:">价格日志</a>-->
        <a class="action"
           @click.prevent.stop="showStoreTypeModal(data)">
            修改门店信息</a>
      </template>
    </a-table>
    <Log :type="1" ref="log">
      <section slot="title" class="title">
        <section>门店日志</section>
        <section class="dot" />
        <section>{{ currStoreData.id }}</section>
      </section>
    </Log>
      <!--编辑实际车图e-->
    <a-modal
      v-model="showOrderModal"
      width="1060px"
      :dialog-style="{ top: '30px' }"
      :body-style="{ padding: 0 }"
      @cancel=";(showOrderModal = false), (storeKey = 'businessServe'), (serveKey = 'storeServe')"
      force-render
    >
      <section class="title flex justify-between" slot="title">
        <section class="flex items-center font-bold text-16">
          {{ storyDetail.name }}
          <a-popover placement="right">
            <a-icon class="text-20 ml-8" type="qrcode" />
            <section slot="content">
              <img class="mt-8 w-160 h-160" :src="storyDetail.wxQrCodeUrl" alt="" />
            </section>
          </a-popover>
        </section>
        <section class="mr-30">
          <a-button @click.stop="storeLog(storyDetail)" href="javascript:">门店日志</a-button>
          <a-button
            v-if="$permissionJudge('StoreStatusSet')"
            class="ml-8"
            type="primary"
            @click.stop="storeActivate(storyDetail, storyDetail.status == '1' ? true : false)"
            >{{ storyDetail.status == '1' ? '下线门店' : '激活门店' }}</a-button
          >
        </section>
      </section>
      <a-spin :spinning="detailsLoading">
        <div class="flex justify-between div1">
          <div class="flex justify-start flex-wrap">
            <p class="w-1-3">门店编号：{{ storyDetail.id }}</p>
            <p class="w-1-3">供应商：{{ storyDetail.vendorName }}</p>
            <p class="w-1-3">所在城市：{{ storyDetail.cityName }}</p>
            <p class="w-1-3">联系人：{{ storyDetail.contactName }}</p>
            <p class="w-1-3">
              联系电话：
              <a :href="'tel:' + storyDetail.contactPhoneNumber"
                ><a-icon style="transform: rotateY(180deg)" type="phone" />{{ storyDetail.contactPhoneNumber }}</a>
            </p>
            <p class="w-1-3">联系邮箱：{{ storyDetail.contactEmail }}</p>
            <p class="w-1-3">
              经营执照与营业信息：
              <PreviewImage
                class="mt-12"
                v-if="storyDetail.imgUrl"
                v-model="(storyDetail.imgUrl || '').split(',').filter((e) => e)"
              />
            </p>
            <p class="w-1-3">
              门店地址：{{ storyDetail.address
              }}<img
                style="width: 18px"
                @click="setMapPoint(storyDetail)"
                src="@/assets/icons/pin.png"
                alt=""
                class="cursor-pointer mx-9"
              />
            </p>
             <p class="w-1-3" v-if="storyDetail.storeType!==0">
              门店类型：{{ storyDetail.storeType | storeType }}
            </p>
          </div>
          <div style="flex: 80px">
            <p>状态</p>
            <p :class="storyDetail.status == '1' ? 'clg' : 'clr'">{{ storyDetail.status == '1' ? '激活' : '下线' }}</p>
          </div>
        </div>
        <a-tabs :animated="false" v-model="storeKey" @change="storeInfo">
          <a-tab-pane key="businessServe" tab="营业与服务">
            <BusinessServe @viewPolicy="getOrderInfo('pickupAndReturnInfo')" :data="BusinessData" />
          </a-tab-pane>

          <a-tab-pane key="carInfo" tab="车辆信息" class="info">
            <CarInfo ref="CarInfo" :data="carInfo" :storeId2="storeId2"  />
          </a-tab-pane>

            <a-tab-pane key="carTypeInfo" tab="车型信息" class="info">
                <CarModel ref="TypeInfo"  :storeId2="storeId2"  />
            </a-tab-pane>

          <a-tab-pane key="carRental" tab="租车政策">
            <CarRental :data="carRental" ref="CarRental" :storeId2="storeId2" />
          </a-tab-pane>
          <a-tab-pane key="informManner" tab="通知方式">
            <InformManner :data="informManner" ref="InformManner" :storeId2="storeId2" />
          </a-tab-pane>
          <a-tab-pane key="Holiday" tab="休息日">
            <Holiday :data="informManner" ref="Holiday" :storeId2="storeId2" />
          </a-tab-pane>
        </a-tabs>

        <a-tabs v-if="serveInfo" :animated="false" v-model="serveKey" @change="storeInfo2">
          <a-tab-pane key="storeServe" tab="门店服务范围">
            <StoreServe :storyDetail="storyDetail" ref="StoreServe" :storeId2="storeId2" :pageList="pageList" />
          </a-tab-pane>
<!--          <a-tab-pane key="storeDelivery" tab="门店交付点">-->
<!--            <StoreDelivery-->
<!--              :data="detailData"-->
<!--              ref="StoreDelivery"-->
<!--              :storeId2="storeId2"-->
<!--              :servicePointpageList="servicePointpageList"-->
<!--            />-->
<!--          </a-tab-pane>-->
        </a-tabs>
      </a-spin>
      <a-button
        type="primary"
        slot="footer"
        @click=";(showOrderModal = false), (storeKey = 'businessServe'), (serveKey = 'storeServe')"
        >返回门店</a-button
      >
      <AddressComp ref="map" />
    </a-modal>
    <OfflineStore :visible="showOffineState" @close="closeOffineState" :items="OffineData" />
    <!--门店修改-->
      <a-modal v-model="showStoreType" title="修改门店信息" width="1260px" @cancel="storeTypeCancel" @ok="storeTypeOk">
          <a-form :form="storeEditForm" >
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="门店名称:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                            <a-input
                                v-decorator="['name',{ rules: [{ required: true, message: '请输入门店名称!' }] }]"
                                placeholder="请输入门店名称"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="所在城市:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
<!--                            <SelectCity-->
<!--                                class="mr-24 w-300 mb-16"-->
<!--                                placeholder="请选择所在城市"-->
<!--                                :options="{ allowClear: true }"-->
<!--                                @change="testChange"-->
<!--                                v-decorator="['cityId',{ rules: [{ required: true, message: '请选择所在城市!' }] }]"/>-->
                            <a-input v-decorator="['cityName']"
                                     disabled
                                     placeholder="请选择所在城市" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系人:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="['contactName',{ rules: [{ required: true, message: '请输门店联系人!' }] }]"
                                     placeholder="请输门店联系人" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="联系人电话:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="['contactPhoneNumber',{ rules: [{ required: true, message: '请输门店联系人!' }] }]"
                                     placeholder="请输门店联系人" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="门店联系电话:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                            <a-input  v-decorator="['telephone',{ rules: [{ required: true, message: '请输门店联系人!' }] }]" placeholder="请输入门店名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="门店类型:" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                            <a-select v-decorator="['storeType']" placeholder="请选择门店类型">
                                <a-select-option :value="1">直营</a-select-option>
                                <a-select-option :value="2">自营</a-select-option>
                                <a-select-option :value="3">旗舰店</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :span="24">
                        <a-form-item label="门店地址：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
                          <section class="flex items-center">
                              <a-input v-decorator="['address',{ rules: [{ required: true, message: '请输门店地址!' }] }]" disabled  placeholder="请输入门店地址" />
                              <img
                                  style="width: 18px;height: 18px;margin-left: 10px;"
                                  @click="showSelectAddress()"
                                  src="@/assets/icons/pin.png"
                                  class="cursor-pointer mx-9"
                              />
                              <a-input v-decorator="['longitude']" type="hidden" />
                              <a-input v-decorator="['latitude']" type="hidden" />
                          </section>
                        </a-form-item>
                    </a-col>
                </a-row>
          </a-form>
      </a-modal>
      <select-address v-model="selectAddress"
                      :lng="storeEditData.longitude"
                      :lat="storeEditData.latitude"
                      :address="storeEditData.address"
                      @ok="selectConfim" />
  </a-card>
</template>

<script>
import { tableMixins } from '@/utils/mixins'
import {
  getPageStoreList,
  changeStatus,
  getStoreDetail,
  storeBusinessHours,
  serviceScopeList,
  servicePointList,
  getCarPagedList,
  addedServiceList,
  refreshQrCode,
} from '@/api/store/index'
import { searchVendor} from '@/api/vendor'
import AddressComp from '@/views/order/order-manage/AddressComp' //点击地图
import BusinessServe from './store-info/BusinessServe' //营业与服务
import CarInfo from './store-info/CarInfo' //车辆信息
import AddedValue from './store-info/AddedValue' //增值服务
import CarRental from './store-info/CarRental' //租车政策
import InformManner from './store-info/InformManner' //通知方式
import StoreServe from './store-info/StoreServe' //门店服务范围
import StoreDelivery from './store-info/StoreDelivery' //门店交付点
import Holiday from './store-info/Holiday' //门店交付点
import OfflineStore from '@/components/store/OfflineStore'
import {editStoreSubject} from "@/api/store.js";
import selectAddress from "@/components/map/select-Address.vue";
import CarModel from "./carModel.vue";
import { debounce} from 'lodash'
export default {
  mixins: [tableMixins],
  components: {
    AddressComp,
    BusinessServe,
    CarInfo,
    AddedValue,
    CarRental,
    InformManner,
    StoreServe,
    StoreDelivery,
    OfflineStore,
      selectAddress,
      CarModel,
      Holiday
  },
  props: {},
  data() {
    return {
      loading: false,
      name: undefined,
      contactName: undefined,
      telephone: undefined,
      status: undefined,
      cityId: undefined,
      isUp: false,
      showOrderModal: false,
	  vendorList:[],
	  selectConfig:{
	    searchKey: '',
	    searchLoading: false,
	    data: [],
	    total:0,
	    pageNum:1,
	    rowsNum:10,
	  },
      // pageNum: 1,
      rowsNum: 10,
      columns: [
        { width: 400, title: '门店名称', dataIndex: 'name', align: 'center', scopedSlots: { customRender: 'name' } },
        { title: '营业信息', align: 'center', scopedSlots: { customRender: 'openingTime' } },
        { title: '联系人信息', align: 'center', scopedSlots: { customRender: 'contactName' } },
        { title: '状态', align: 'center', dataIndex: 'statusName', scopedSlots: { customRender: 'statusName' } },
        { width: 120, align: 'center', title: '操作', scopedSlots: { customRender: 'action' } },
      ],
      currStoreData: {},
      data: [],
      stateList: [],
      cityList: [],
      storeId: null,
      storyDetail: {},
      detailData: {},
      detailsLoading: false,
      storeKey: 'businessServe',
      serveKey: 'storeServe',
      serveInfo: true,
      pageList: [],
      servicePointpageList: [],
      storeId2: '',
      carList: [],
      addedData: [],
      BusinessData: [], //营业与服务
      refreshtype: undefined,
      refreshwxQrCodeUrl: undefined,
      refreshaliQrCodeUrl: undefined,
      ChannelCode: undefined,
      showOffineState: false,
      OffineData: undefined,
      showStoreType: false,
      storeType: 2,
      currStoreTypeData: null,
      storeEditForm: this.$form.createForm(this, {}),
      selectAddress: false,
      storeEditData: {},
    }
  },
  created() {
    this.$utils.getDictList('StoreStatus').then((res) => {
      //门店状态
      this.stateList = res
    })
    const { type, data } = this.$route.query
    if (type == 2) {
      this.getData()
      this.$nextTick(() => {
        this.storeDetails(data)
      })
    }
    this.getData()
  },
  async mounted() {
     this.searchData = debounce(this.searchData, 100);
  },
  methods: {
	  filterOption(input, option) {
	    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
	  },
	  getVendorList(){//服务商筛选
	    this.selectConfig.searchLoading = true
	    searchVendor({
	          search: this.selectConfig.searchKey.trim(),
	          rowsNum: this.selectConfig.rowsNum,
	         pageNum: this.selectConfig.pageNum,
	          isEnabled: true
	        }).then((data) => {
	          this.selectConfig.searchLoading = false
	          const {items, rowCount} = data
	            this.vendorList = this.selectConfig.pageNum === 1 ? items : [...this.vendorList.concat(items)]
	         
	         this.selectConfig.total = rowCount
	        }
	      ).catch(() => this.selectConfig.searchLoading = false)
	  },
	  popupScroll:debounce (function (e) {
	    const {scrollHeight, scrollTop, clientHeight} = e.target
	    if (scrollHeight - scrollTop === clientHeight) {
	      if (!(this.vendorList.length === this.selectConfig.total)){
	        this.selectConfig.pageNum++
	        this.getVendorList()
	      }
	    }
	  },500),
	  searchData(searchKey) {
	      this.selectConfig.searchKey = searchKey
	      this.selectConfig.pageNum = 1
	      this.getVendorList()
	    },
	  focus() {
	      this.selectConfig.searchKey = ''
	      this.selectConfig.pageNum = 1
	      this.getVendorList()
	    },
      priceLog(item) {
          this.currStoreData = item
          this.$refs.priceLog.open(item.id)
      },
      showSelectAddress() {
          this.selectAddress = true
      },
      selectConfim(data) {
          console.log(data)
          this.storeEditForm.setFieldsValue({
              address: data.formattedAddress,
              longitude: data.lng,
              latitude: data.lat,
          })
      },
     async showStoreTypeModal(data) {
         const result= await getStoreDetail({ storeId: data.id });
         this.storeEditData = result
         this.currStoreTypeData = data
         this.showStoreType = true
         this.$nextTick(()=>{
             this.storeEditForm.setFieldsValue({
                 storeType: result.storeType || 2,
                 address: result.address,
                 cityId: result.cityId,
                 telephone: result.telephone,
                 name: result.name,
                 contactName: result.contactName,
                 contactPhoneNumber: result.contactPhoneNumber,
                 cityName: result.cityName,
                 longitude: result.longitude,
                 latitude: result.latitude,
             })
         })
      },
      storeTypeCancel() {
          this.showStoreType = false
          this.storeType = 2
          this.currStoreTypeData = null
      },
      //门店类型
      async storeTypeOk() {
          //验证表单
            this.storeEditForm.validateFields(async (err, values) => {
                if (err) {
                    return
                }
                const params = {
                    id: this.storeEditData.id,
                    storeType: values.storeType,
                    address: values.address,
                    cityId: this.storeEditData.cityId,
                    telephone: values.telephone,
                    name: values.name,
                    contactName: values.contactName,
                    contactPhoneNumber: values.contactPhoneNumber,
                    cityName: values.cityName,
                    imgUrl: this.storeEditData.imgUrl,
                    longitude: values.longitude,
                    latitude: values.latitude,
                }
                const result = await editStoreSubject(params)
                if (result) {
                    this.$message.success('修改成功')
                    this.storeTypeCancel()
                    this.getData()
                }
            })

          // if(this.currStoreTypeData.storeType === this.storeType){return}
          // const send = {
          //     name: this.currStoreTypeData.name,
          //     contactName: this.currStoreTypeData.contactName,
          //     telephone: this.currStoreTypeData.telephone,
          //     cityId: this.currStoreTypeData.cityId,
          //     address: this.currStoreTypeData.address,
          //     imgUrl: this.currStoreTypeData.imgUrl,
          //     storeType: this.storeType,
          // }
          // const result = await editStoreSubject(send)
          //   if (result) {
          //       this.$message.success('修改成功')
          //       this.storeTypeCancel()
          //       this.getData()
          //   }
          // console.log(`result`, result)
      },
    // 门店下线
    storeOffline(data) {
      this.OffineData = data
      this.showOffineState = !this.showOffineState
    },
    // 关闭弹窗
    closeOffineState(bool = false) {
      if (bool) {
        this.getData()
        this.getStoreDetail(this.OffineData.id)
      }
      this.showOffineState = !this.showOffineState
    },

    isUpOn() {
      this.isUp = !this.isUp
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.name = undefined
      this.contactName = undefined
      this.telephone = undefined
      this.status = undefined
      this.cityId = undefined
	  this.vendorId=undefined
      this.search()
    },
    storeInfo(e) {
      if (e !== 'businessServe') {
        this.serveInfo = false
      } else {
        this.serveInfo = true
        this.$nextTick(() => {
          this.$refs.StoreServe.getData(this.storeId2)
        })
      }
      if (e == 'carInfo') {
        this.$nextTick(() => {
            console.log(this.$refs.CarInfo)
          this.$refs.CarInfo.getData(this.storeId2)
        })
      }
        if (e == 'carTypeInfo') {
            this.$nextTick(() => {
                this.$refs.TypeInfo.getData(this.storeId2)
            })
        }


        if (e == 'addedValue') {
        this.loading = true
        addedServiceList({
          storeId: this.storeId2,
        })
          .then((data) => {
            this.addedData = data
          })
          .finally(() => (this.loading = false))
      }
      if (e == 'carRental') {
        this.$nextTick(() => {
          this.$refs.CarRental._getStoreDetail()
          this.$refs.CarRental.getRentalConfig()
        })
      }
      if (e == 'informManner') {
        this.$nextTick(() => {
          this.$refs.InformManner.getData()
        })
      }
    },
    storeInfo2(e) {
      if (e == 'storeDelivery') {
        this.servicePointgetData(this.storeId2)
        this.$nextTick(() => {
          this.$refs.StoreDelivery.getData(this.storeId2)
          this.$refs.StoreDelivery._getStoreDetail(this.storeId2)
        })
      } else if (e == 'storeServe') {
        this.$nextTick(() => {
          this.$refs.StoreServe.getData(this.storeId2)
          this.$refs.StoreServe._getStoreDetail(this.storeId2)
        })
      }
    },
    // 门店详情
    storeDetails(data) {
      this.storeKey = 'businessServe'
      this.storeId2 = data.id
      const storeId = data.id
      this.showOrderModal = true
      this.serveInfo = true
      this.detailsLoading = true
      // 营业与服务
      storeBusinessHours({ storeId })
        .then((data) => {
          this.BusinessData = data
        })
        .finally(() => (this.detailsLoading = false))
      // 门店详情
      this.getStoreDetail(storeId)
    },
    getStoreDetail(storeId) {
      // let storeId = this.storeId2
      getStoreDetail({ storeId })
        .then((data) => {
          this.storyDetail = data
          this.detailData = data
          this.$refs.StoreServe.getData(storeId)
        })
        .finally(() => (this.detailsLoading = false))
    },

    // 门店服务范围
    serviceScopeList(id) {
      // 获取列表

      return new Promise((resolve, reject) => {
        // isLoading && (this.loading = true)
        serviceScopeList({
          storeId: id, // 门店id
          // isContainDisable: true, // 是否包含禁用的数据
        })
          .then((res) => {
            res = res.map((x1) => {
              return {
                ...x1,
                coordinatesArr:
                  x1.coordinatesArr.length > 0 &&
                  x1.coordinatesArr.map((x2) => {
                    return x2.map((x3) => {
                      return [x3.lng, x3.lat]
                    })
                  }),
              }
            })
            this.pageList = res
            resolve()
          })
          .finally(() => {
            // this.loading = false
          })
      })
    },

    // 门店交付点
    servicePointgetData(id) {
      // 获取列表
      return new Promise((resolve, reject) => {
        // this.loading = true
        servicePointList({
          storeId: id, // 门店id
        })
          .then((res) => {
            this.servicePointpageList = res
            resolve()
          })
          .finally(() => {
            // this.loading = false
          })
      })
    },

    //门店日志
    storeLog(data) {
      this.currStoreData = data
      this.$refs.log.open(data.id)
    },
    //门店激活
    storeActivate(data, type) {
      if (type) {
        return this.storeOffline(data)
      }
      if (data.status === 3 && data.auditType === 1) return false
      this.$confirm({
        title: `请确认要${type ? '下线' : '激活'}`,
        content: `请确认要${type ? '下线' : '激活'}【${data.name}】吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          if (this.confirmLoading) return false
          this.confirmLoading = true
          changeStatus({ id: data.id, isClose: type })
            .then((res) => {
              this.$message.warning('设置成功')
              this.getData()
              this.getStoreDetail(data.id)
            })
            .finally(() => {
              this.confirmLoading = false
            })
        },
      })
    },
    // 获取门店列表信息
    getData() {
      this.loading = true
      const { name, contactName, telephone, status, cityId, rowsNum, pageNum } = this
      const params = {
        name,
        contactName,
        telephone,
        status: status ? status : undefined,
        cityId,
        rowsNum,
        pageNum,
		 vendorId: this.vendorId?this.vendorId.key: undefined,
      }
      getPageStoreList(this.$utils.trimValue(params))
        .then((res) => {
          const { items, rowCount } = res
          this.data = items.map((item) => ({
            ...item,
            statusName: this.stateList.find((j) => j.value === item.status).name,
          }))
          this.total = rowCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    setMapPoint(data, label = 'pickup') {
      this.$refs.map.setMapPoint({
        longitude: data['longitude'],
        latitude: data['latitude'],
        content: data['address'],
      })
    },
    // 二维码刷新
    refresh(data) {
      this.ChannelCode = data.id
      this.refreshtype = 1
      refreshQrCode({ storeId: data.id }).then((res) => {
        this.refreshwxQrCodeUrl = res.wxQrCodeUrl
        this.refreshaliQrCodeUrl = res.aliQrCodeUrl
        this.getData()
      })
    },
  },
  filters:{
      storeType(val){
          if(val == 1){
              return '直营'
          }else if(val == 2){
              return '自营'
          }else if(val == 3){
              return '旗舰店'
          }
      }
  }
}
</script>
<style scoped lang='less'>
.info {
  overflow: auto;
}
.title {
  display: flex;
  align-items: center;

  .dot {
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
  }
}

.action {
  display: block;
}

.grey {
  cursor: no-drop;

  .action {
    color: #ccc;
  }
}

.grey:hover {
  color: #ccc;
}

.label {
  display: inline-block;
  width: 70px;
  text-align: right;
}

.table-con {
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 12px;
  }
}

@media screen and (max-width: 1400px) {
  .isUp .filter-bar {
    width: 800px;
  }
}
.store-set {
  background: #faad14;
  color: #fff;
  border-color: #faad14;
}
.store-set:hover {
  background: #ffc042;
}
.div1 {
  padding: 16px 24px;
}
.clg {
  color: green;
  font-weight: 800;
}
.clr {
  color: red;
  font-weight: 800;
}
</style>
